<template>
  <div class="view-container">

    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData?.agentProductNumber }}
          </span>
          <el-tag size="small" style="margin-right: 15px" type="warning">
            {{ getLabel('marketing_agent_product_status', formData?.agentProductStatus) }}
          </el-tag>
          <el-tag size="small" v-if="formData?.agentProductDevStatus === '1'" style="margin-right: 15px" type="warning">
            无交易终端
          </el-tag>

        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>

        <template v-if="formData">
          <el-button v-if="formData?.agentProductStatus ==='2'" size="small" type="primary"
            @click="handlAddDistribution">
            添加配送信息
          </el-button>
        </template>

      </template>
    </header-module>

    <div style="background-color: white;padding-top: 20px">
      <el-form v-if="formData" :inline="true" class="filter-form-inline" label-position="left" size="small">
        <el-row :gutter="40" style="margin-left: 20px; margin-right: 20px">
          <el-col :lg="6" :xs="4" class="col">
            <el-form-item label="代理名称：">
              <span>{{ formData?.agentName }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="formData?.agentType === 'agent'" :lg="8" :xs="4">
            <el-form-item class="item_col" label="所在地区：">
              <span>{{ formData?.provinceName }}/{{ formData?.cityName }}/{{ formData?.areaName }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="4">
            <el-form-item label="详细地址：">
              <span>{{ formData?.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="main-content" style="margin-top: 20px">
      <div class="list-container">
        <el-tabs v-model="activeName" class="elTabs">

          <el-tab-pane label="详细信息" name="detailed">
            <detailed v-if="activeName === 'detailed'" :datas="formData" />
          </el-tab-pane>

          <el-tab-pane label="配送信息" name="distributionInformation">
            <distributionInformation ref="distributionInformationRef" v-if="activeName === 'distributionInformation'"
              :unit="formData?.sellUnit" />
          </el-tab-pane>

          <el-tab-pane label="配送终端" name="distributionTerminal">
            <distributionTerminal v-if="activeName === 'distributionTerminal'" :formData="formData" />
          </el-tab-pane>

          <el-tab-pane label="修改记录" name="record">
            <operation-view v-if="activeName === 'record'" mode="agent_product" />
          </el-tab-pane>

        </el-tabs>
      </div>
    </div>

    <!--添加配送信息-->
    <shipping ref="shippingRef" :tradePrice="formData?.tradePrice" @success="success" />
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "Index",
  components: {
    detailed: defineAsyncComponent(() => import("../modules/detailed.vue")),
    distributionInformation: defineAsyncComponent(() =>
      import("../modules/distributionInformation.vue")
    ),
    distributionTerminal: defineAsyncComponent(() =>
      import("../modules/distributionTerminal.vue")
    ),
    shipping: defineAsyncComponent(() => import("../modules/shipping.vue")),
  },
  setup() {
    const currentInstance = getCurrentInstance();
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      activeName: "detailed",
      formData: null,
      shippingRef: null,
      distributionInformationRef: null,
    });

    const handlBack = () => {
      router.go(-1);
    };

    const handlDetails = (id) => {
      api.marketingMatching.REGIONAL_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.agentProduct;
        }
      });
    };

    const handlAddDistribution = () => {
      data.shippingRef.open(data.formData);
    };

    const success = () => {
      handlDetails(route.query.id);
      if (data.activeName === "distributionInformation") {
        data.distributionInformationRef.handlList(route.query.id);
      }
    };

    onMounted(() => {
      if (route.query.id) {
        handlDetails(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handlBack,
      handlDetails,
      handlAddDistribution,
      success,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
